<template>
    <CommonCard title="今日订单量" :count="orderToday">
        <template #middle>
            <div ref="divRef" style="height: 50px; width: 100%;"></div>
        </template>
        <template #bottom>
            <span>昨日订单量</span>
            <span class="ml-10">{{ orderLastDay }}</span>
        </template>
    </CommonCard>

</template>

<script setup lang="ts">
import CommonCard from "../CommonCard/index.vue"
import useEchartStore from '@/stores/echart'
import { computed, onMounted, ref, watch } from "vue";
import { $echarts } from '@/plugins/echart'
import type { EChartsType } from "echarts";
import { throttle } from 'lodash'
const divRef = ref()
const echartStore = useEchartStore();
const orderToday = computed(() => {
    return echartStore.echartData.orderToday
})
const orderLastDay = computed(() => {
    return echartStore.echartData.orderLastDay
})
const orderTrend = computed(() => {
    return echartStore.echartData.orderTrend
})
const orderTrendAxis = computed(() => {
    return echartStore.echartData.orderTrendAxis
})

const setOption = () => {
    return {
        grid: {
            top: 0,
            bottom: 0,
            left: 0,
            right: 0
        },
        xAxis: {
            show: false,
            data: orderTrendAxis.value
        },
        yAxis: {
            show: false
        },
        series: {
            name: '销售量',
            type: 'line',
            data: orderTrend.value,
            itemStyle: {
                opacity: 0
            },
            lineStyle: {
                opacity: 0
            },
            areaStyle: {
                color: 'hotpink',
                origin: 'start'
            },
            smooth: true
        },

    }
}

const chart = ref<EChartsType>()
const resize = throttle(() => {
    chart.value?.resize();
}, 300)
onMounted(() => {
    chart.value = $echarts.init(divRef.value as HTMLDivElement)
    chart.value.setOption(setOption())
    window.addEventListener('resize', resize)
})

watch(() => orderTrend.value, () => {
    chart.value?.setOption(setOption())
})
</script>

<style scoped>

</style>